<template>
  <div class="login">
	  <div>

	  </div>
	  <el-form
		:model="ruleForm"
		:rules="rules"
		ref="ruleForm"
		label-width="100px"
		class="demo-ruleForm"
		>
		<el-form-item label="账号" prop="account">
			<el-input v-model="ruleForm.account"></el-input>
		</el-form-item>

		<el-form-item label="密码" prop="password">
			<el-input placeholder="请输入密码"  v-model="ruleForm.password" show-password></el-input>
		</el-form-item>

		<el-form-item>
		<el-button type="primary" @click="submitForm('ruleForm')" 
			class="el-icon-thumb" >登录</el-button>
		<el-button @click="resetForm('ruleForm')"
			class="el-icon-refresh-right">重置</el-button>
		</el-form-item>

  		</el-form>
  </div>
</template>
  </div>
  </template>
<script>
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        account: "",
        password: "",
      },
      rules: {
        account: [
          { required: true, message: "请输入账号", trigger: "blur" }
		],
		password: [
          { required: true, message: "请输入密码", trigger: "blur" }
        ]
	  }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push('/main');
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.login {
	margin-top: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-size: cover;
}
</style>